<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :mask-closable="false"
    :esc-to-close="false"
    :modal-style="{ maxWidth: '520px' }"
    width="90%"
    @before-ok="save"
    @close="reset"
  >
    <GiForm
      ref="formRef"
      v-model="form"
      :options="options"
      :columns="columns"
    >
    <template #pid="{ record }">
      <a-cascader
        v-model="form.pid"
        :options="treeList"
        :disabled="isUpdate.value && form.pid === 0"
        :field-names="{ label: 'name', value: 'id'}"
        check-strictly
        :fallback="fallback"
      />
      
    </template>
    </GiForm>
  </a-modal>
</template>

<script setup lang="ts">
import { Message } from "@arco-design/web-vue";
import { type CategoryQuery,getCategory, addCategory, updateCategory, treeCategory } from "@/apis";
import { type Columns, GiForm, type Options } from "@/components/GiForm";
import { useForm } from "@/hooks";
import { useDict } from "@/hooks/app";

const emit = defineEmits<{
  (e: "save-success"): void;
}>();

const dataId = ref("");
const treeList = ref<any>([]);
const isUpdate = computed(() => !!dataId.value);
const title = computed(() => (isUpdate.value ? "修改分类" : "新增分类"));

const formRef = ref<InstanceType<typeof GiForm>>();

const options: Options = {
  form: {},
  col: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
  btns: { hide: true },
};

const columns: Columns = [
  {
    label: "分类名称",
    field: "name",
    type: "input",
    rules: [{ required: true, message: "请输入分类名称" }],
  },
  {
    label: "父级",
    field: "pid",
    type: "select",
  },
  {
    label: "排序",
    field: "sort",
    type: "input",
    rules: [{ required: true, message: "请输入排序" }],
  },
  {
    label: "状态",
    field: "status",
    type: "switch",
    props: {
      type: "round",
      checkedValue: 1,
      uncheckedValue: 0,
      checkedText: "启用",
      uncheckedText: "禁用",
    },
  },
];


const { form, resetForm } = useForm({
  name: "",
  pid: 0,
  sort: 0,
  status: 1,
  // 1 产品分类，2 附件分类，3 文章分类， 4 设置分类， 5 菜单分类，6 配置分类， 7 秒杀配置
  type: 1
});

// 重置
const reset = () => {
  formRef.value?.formRef?.resetFields();
  resetForm();
};

const visible = ref(false);

onMounted(() => {
  getTreeList();
});

const getTreeList = async () => {
  const _pram = reactive({ type: "1", status: "1", name: "" })
  const res = await treeCategory(_pram);
  treeList.value = res.data;
  treeList.value.map((o,i) => {
    if (o.children && o.children.length) {
      // o.disabled = true
      o.children.forEach((j) => {
        j.disabled = true
      })
    }
  })
};

const fallback = (value) => {
  console.log(value)
}

// 新增
const onAdd = () => {
  reset();
  dataId.value = "";
  visible.value = true;
};

// 新增
const onAddSub = (pid: number) => {
  reset();
  dataId.value = "";
  form.pid = pid;
  visible.value = true;
};

// 修改
const onUpdate = async (id: string) => {
  reset();
  dataId.value = id;
  const res = await getCategory(id);
  Object.assign(form, res.data);
  visible.value = true;
};

// 保存
const save = async () => {
  try {
    const isInvalid = await formRef.value?.formRef?.validate();
    if (isInvalid) return false;
    if (isUpdate.value) {
      await updateCategory(form, dataId.value);
      Message.success("修改成功");
    } else {
      await addCategory(form);
      Message.success("新增成功");
    }
    emit("save-success");
    return true;
  } catch (error) {
    return false;
  }
};

defineExpose({ onAdd, onUpdate,onAddSub });
</script>
